<template>
  <div class="page">
    <div class="panel-border">
      <SearchForm
        ref="mychild"
        size="mini"
        :search-data="searchData"
        :search-form="searchForm"
        :search-handle="searchHandle"
        :style_="style"
      />
    </div>
    <div class="panel-border">
      <el-table
        v-loading="loading"
        :data="optionData"
        :border="true"
        :show-header="true"
        :stripe="true"
      >
        <el-table-column
          type="index"
          label="序号"
          width="50"
        />
        <el-table-column
          v-for="(table, index) in option.column"
          :key="index"
          :prop="table.prop"
          :label="table.label"
        >
          <template slot="auditResult" slot-scope="scope">
            <span
              v-for="item in labelStatusCd"
              v-if="item.item_code == scope.row.auditResult"
              :label="item.item_code"
            >{{ item.item_text }}</span>
          </template>
          <template slot="statusCd" slot-scope="scope">
            <span
              v-for="item in statusCd"
              v-if="item.item_code == scope.row.statusCd"
              :label="item.item_code"
            >{{ item.item_text }}</span>
          </template>
          <template slot="option" slot-scope="scope">
            <el-button
              size="mini"
              type="text"
              :disabled="scope.row.statusCd == 1200 ? false :true"
              @click="labelId=scope.row.labelId;modelType='audit';showDetailModel=true"
              v-text="$t('labelSpec.audit')"
            />
          </template>
          <template slot="labelName" slot-scope="scope">
            <p style="color: #4284D7;" @click="labelId=scope.row.labelId;modelType='detail';showDetailModel=true">{{ scope.row.labelName }}</p>
          </template>
          <template slot="empty">
            {{ $t('empty') }}
          </template>
        </el-table-column>
      </el-table>
      <!--分页-->
      <pagination :page="page" />
    </div>

    <!-- 标签规格详情 -->
    <el-dialog
      :visible.sync="showDetailModel"
      :title="$t('labelSpec.detail')"
      :close-on-click-modal="false"
      :append-to-body="true"
      class="el-dialog-detail"
    >
      <specDetail
        :key="new Date().getTime()"
        :model-type="modelType"
        :label-id="labelId"
        :dialog-options="dialogOptions"
        :label-object="labelObject"
        :label-update-frequency="labelUpdateFrequency"
        :label-datas-source="labelDatasSource"
        :label-value-type="labelValueType"
        :label-data-type="labelDataType"
        :label-status-cd="labelStatusCd"
        :audit-status-cd="auditStatusCd"
        @onDetailSuccess="onDetailSuccess"
      />
    </el-dialog>
  </div>
</template>

<script>
import { selectComTagDataList } from '@/utils/util'
import specDetail from '../labelSpec/specDetail'
import SearchForm from '../../components/search-filter/searchForm'
import pagination from '../../components/Pagination/pagination'
export default {
  name: 'Spec',
  components: {
    specDetail,
    SearchForm,
    pagination
  },
  data() {
	  return {
      loading: true,
      labelObject: [],
      labelUpdateFrequency: [],
      labelStatusCd: [],
      labelDatasSource: [],
      labelValueType: [],
      labelDataType: [],
      auditStatusCd: [],
      statusCd: [{ item_text: this.$t('labelSpec.statusCd.all'), item_code: '' }, { item_text: this.$t('labelSpec.statusCd.waitingApproval'), item_code: '1200' }, { item_text: this.$t('labelSpec.statusCd.toBeApproval'), item_code: '1000' }],
      // 查询表单
      searchData: {
        statusCd: '',
        auditResult: ''
      },
      searchForm: [
		  { type: 'Radio', label: '审核状态:', search: 'labelSpec.listTable.statusCd', prop: 'statusCd', datas: [] },
		  { type: 'Radio', label: '审核结果', search: 'labelSpec.listTable.auditResult', prop: 'auditResult', datas: [] }
      ],
      searchHandle: [
		  { label: '查询', search: 'query', type: 'primary', handle: () => this.onSearch() },
		  { label: '重置', search: 'reset', type: 'primary', handle: () => this.onReset() }
      ],
		  style: 'border:none',
      labelId: 0,
      modelType: 'add',
      showDetailModel: false,
      showAddModel: false,
      highLight: true,
      labelTree: [],
      optionData: [
      ],
      option: {
        index: true,
        indexLabel: this.$t('serialNumber'),
        indexWidth: 120,
        border: true,
        page: false,
        menu: false,
        align: 'center',
        menuAlign: 'center',
        stripe: true,
        column: [
          // {
          // 	label: '序号',
          // 	prop: 'labelId',
          // },
          {
            label: '标签对象',
            prop: 'labelObject',
            overHidden: true,
            minWidth: 100
          }, {
            label: '标签编码',
            prop: 'labelCode',
            overHidden: true,
            minWidth: 100
          }, {
            label: '标签名称',
            prop: 'labelName',
            slot: true,
            overHidden: true,
            minWidth: 100
          }, {
            label: '存储字段',
            prop: 'labelDataCol',
            overHidden: true,
            minWidth: 100
          }, {
            label: '审核状态',
            prop: 'auditResult',
            slot: true,
            overHidden: true,
            minWidth: 100
          }, {
            label: '当前状态',
            prop: 'statusCd',
            slot: true,
            overHidden: true,
            minWidth: 100
          }, {
            label: '标签时间',
            prop: 'statusDate',
            type: 'date',
            format: 'yyyy-MM-dd HH:mm:ss',
            overHidden: true,
            minWidth: 100
          }, {
            label: '申请人',
            prop: 'applyStaffName',
            overHidden: true,
            minWidth: 100
          }, {
            label: '审核人',
            prop: 'auditStaffName',
            overHidden: true,
            minWidth: 100
          }, {
            label: '操作',
            prop: 'option',
            slot: true,
            overHidden: true,
            minWidth: 100
          }],
        saveBtn: false,
        updateBtn: false,
        cancelBtn: false,
        addBtn: false,
        delBtn: false,
        editBtn: false,
        refreshBtn: false,
        columnBtn: false
      },
      options: [],
      dialogOptions: [],
      params: {},
      page: {
        total: 0,
        limit: 10,
        pageSize: 10,
        pagerCount: 1,
        currentPage: 1,
        pageTo: () => this.getLabelData()
      },
      pageInit: {
        total: 0,
        limit: 10,
        pageSize: 10,
        pagerCount: 1,
        currentPage: 1
      },
      tagData: [],
      reqParams: {}

	  }
  },
  watch: {
	    // 监听语言变化，实时切换表头语言
	    '$i18n.locale': {
	        handler() {
	            this.U.changeTableLanguage(this, this.option.column, 'labelSpec.listTable.')
        this.U.changeSearchLanguage(this, this.searchForm, '', 'condition')
        this.U.changeSearchLanguage(this, this.searchHandle, '', 'btn')
      },
	        immediate: true
	    }
  },
  created() {
    this.initData()
  },
  methods: {
    initData() {
      this.getLabelData()
      this.getSearchObject()
      this.getLabelTree()
    },
    getSearchObject() {
      this.R.forTaglib.getDict('LABEL_OBJECT').then((res) => {
        if (res.ok) {
          this.labelObject = res
          this.R.forTaglib.getDict('LABEL_UPDATE_FREQUENCY').then((res) => {
            this.labelUpdateFrequency = res
          })
          this.R.forTaglib.getDict('LABEL_STATUS_CD').then((res) => {
            this.labelStatusCd = res
            this.auditStatusCd = []
            const defultStatus = ['', '1400', '1500']
            this.labelStatusCd.forEach(col => {
              if (defultStatus.indexOf(col.item_code) > -1) {
                this.auditStatusCd.push(col)
              }
            })
            this.U.setSearchForm(this.searchForm, 'auditResult', this.auditStatusCd)

            var status = []
            this.statusCd.forEach(col => {
              status.push(col)
            })
            this.U.setSearchForm(this.searchForm, 'statusCd', status)
          })
          this.R.forTaglib.getDict('LABEL_DATA_SOURCE').then((res) => {
            this.labelDatasSource = res
          })
          this.R.forTaglib.getDict('LABEL_VALUE_TYPE').then((res) => {
            this.labelValueType = res
          })
          this.R.forTaglib.getDict('LABEL_DATA_TYPE').then((res) => {
            this.labelDataType = res
          })
        }
      })
    },
    getAuditStatusCds() {
      return this.statusCd
    },
    // 搜索
    onSearch() {
      console.log('列表事件onSearch')
      this.params = this.searchData
      this.page = this.pageInit
      this.getLabelData()
    },
    onReset() {
      console.log('重置事件onSearch')
      this.searchData.auditResult = ''
      this.searchData.statusCd = ''
      this.getLabelData()
    },
    getLabelData() {
      const that = this
      that.loading = true
      this.page.limit = this.page.pageSize
      this.page.offset = this.page.currentPage
      const reqParam = this.R.extend(this.params, this.page)
      this.R.forTaglib.postJson('/mktlabel/queryAuditList', reqParam).then(res => {
        that.page.total = res.rowCount
        that.page.currentPage = res.offset
        that.page.pageSize = res.limit
        that.page.pagerCount = res.pageCount
        that.optionData = res.dataList
        that.loading = false
      }).catch(err => {
        that.$message.error(err.toString())
      })
    },
    getLabelTree() {
      const that = this
      that.loading = true
      this.R.forTaglib.get('/labelLevel/queryList').then(res => {
        this.labelTree = []
        var laberList = res
        // tree
        for (var i = 0; i < laberList.length; i++) {
          if (laberList[i].upLabelLevelId == null) {
            laberList[i].children = this.getChildren(laberList, laberList[i].labelLevelId)
            this.labelTree.push(laberList[i])
            break
          }
        }
        // 弹框options
        this.dialogOptions = []
        for (var i = 0; i < this.labelTree.length; i++) {
          if (this.labelTree[i].upLabelLevelId == null) {
            this.labelTree[i].labelLevelPathNameDialog = this.labelTree[i].labelLevelName
            this.dialogOptions.push(this.labelTree[i])
            this.getDialogOptions(this.labelTree[i].children, this.labelTree[i])
            break
          }
        }
        that.loading = false
      }).catch(err => {
        that.$message.error(err.toString())
      })
    },
    getChildren(laberList, labelLevelId) {
      var children = []
      for (var i = 0; i < laberList.length; i++) {
        if (laberList[i].upLabelLevelId != null && laberList[i].upLabelLevelId == labelLevelId) {
          laberList[i].children = this.getChildren(laberList, laberList[i].labelLevelId)
          children.push(laberList[i])
        }
      }
      return children
    },
    getDialogOptions(labelTree, label) {
      for (var i = 0; i < labelTree.length; i++) {
        labelTree[i].labelLevelPathNameDialog = label.labelLevelPathNameDialog + '-->' + labelTree[i].labelLevelName
        this.dialogOptions.push(labelTree[i])
        this.getDialogOptions(labelTree[i].children, labelTree[i])
      }
    },
    refreshChange() {
      this.getLabelData()
    },
    onDetailSuccess(isSuccess) {
		    if (isSuccess) {
		        this.getLabelData()
		        this.showDetailModel = false
		    }
    }
  }
}
</script>

<style>

</style>
